<template>
  <div class="layout-container">
    <div class="layout-components">
      {{ reportConfig }}
      <draggable
        class="dragArea list-group"
        :list="components"
        :group="{ name: 'designer', pull: 'clone', put: false }"
        :clone="cloneComponent"
        item-key="id"
        @end="handleEnd"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>

    <div class="layout-designer">
      <draggable
        class="layout-panel"
        :list="reportConfig"
        group="designer"
        item-key="id"
        @change="handleChange"
      >
        <template #item="{ element }">
          <DragResize
            :w="element.width"
            :h="element.height"
            :x="element.left"
            :y="element.top"
            :isActive="true"
            @resizing="(size) => handleResize(element, size)"
            @dragging="(size) => handleResize(element, size)"
            :parentLimitation="true"
          >
            <component :is="element.component" v-bind="{ ...element }" />
          </DragResize>
        </template>
      </draggable>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
import defineComponents from './components/cmponentConfig';
// import DragResize from '/@/components/DragResize';
let idGlobal = 8;
const components = ref(defineComponents);
const reportConfig = ref([]);

const cloneComponent = (element) => {
  return {
    id: idGlobal++,
    ...element,
  };
};
const handleResize = (element, { height, left, top, width }) => {
  element.width = width;
  element.height = height;
  element.left = left;
  element.top = top;
};
const handleChange = (e, a) => {
  // const index = e.added.newIndex;
  // // reportConfig.value[index].left = event.offsetX - reportConfig.value[index].width / 2;
  // reportConfig.value[index].left = 600 // event.offsetY - reportConfig.value[index].height / 2;
  // reportConfig.value[index].top = 400 // event.offsetY - reportConfig.value[index].height / 2;
  // debugger
}
const handleEnd = (e) => {
  console.log(e, 'ed', e.originalEvent.offsetX);
  // const index = e.newIndex;
  // reportConfig.value[0].left = 500
  // // reportConfig.value[index].left = 500
  // const componentConfig = reportConfig.value[index];
  // reportConfig.value[index].left = 500 //e.originalEvent.offsetX - componentConfig.width / 2;
  // reportConfig.value[index].top = e.originalEvent.offsetY - componentConfig.height / 2;
  // console.log(reportConfig.value[index], '结果变了吗')
  // console.log(e.originalEvent.offsetX - componentConfig.width / 2)
  // console.log(e.originalEvent.offsetY - componentConfig.height / 2)
}
const getConfig = () => {
  console.log(reportConfig.value);
};
</script>
<style scoped>
.layout-container {
  display: flex;
  height: 100%;
  border: 1px solid red;
}
.layout-container .layout-components {
  width: 300px;
}
.layout-container .layout-designer {
  flex: 1;
  height: 100%;
  border: 1px solid #fff;
}
.layout-container .layout-designer .layout-panel {
  height: 100%;
  position: relative;
}
</style>
